<route lang="json5" type="page">
  {
    "name": "privacy",
    "layout": "default",
    "style": {
      "disableScroll": true,
      "navigationStyle": "default",
      "enablePullDownRefresh": false,
      "navigationBarBackgroundColor": "#F8F8F8",
      "navigationBarTitleText": "Echo Reminis隐私保护指引"
    }
  }
</route>

<script setup>
// Privacy policy page component
</script>

<template>
  <div class="privacy-container">
    <div class="privacy-header">
      <h1 class="privacy-title">
        Echo Reminis 小程序隐私保护指引
      </h1>
    </div>

    <div class="privacy-content">
      <div class="privacy-section">
        <div class="section-intro">
          <p>
            本指引是Echo Reminis小程序开发者（以下简称"开发者"）为处理你的个人信息而制定。
          </p>
        </div>
      </div>

      <div class="privacy-section">
        <div class="section-header">
          <h2 class="section-title">
            <i class="icon-info" />
            开发者处理的信息
          </h2>
          <p class="section-description">
            根据法律规定，开发者仅处理实现小程序功能所必要的信息。
          </p>
        </div>

        <div class="info-list">
          <div class="info-item">
            <div class="info-icon">
              📷
            </div>
            <div class="info-content">
              <p>开发者将在获取你的明示同意后，使用你的相册（仅写入）权限，用途是【保存您的挪车码或二维码】</p>
            </div>
          </div>

          <div class="info-item">
            <div class="info-icon">
              📍
            </div>
            <div class="info-content">
              <p>开发者将在获取你的明示同意后，收集你的位置信息，用途是【展示您的车辆位置】</p>
            </div>
          </div>

          <div class="info-item">
            <div class="info-icon">
              👤
            </div>
            <div class="info-content">
              <p>开发者将在获取你的明示同意后，收集你的微信昵称、头像，用途是【完善优化您的个人信息】</p>
            </div>
          </div>

          <div class="info-item">
            <div class="info-icon">
              🖼️
            </div>
            <div class="info-content">
              <p>开发者收集你选中的照片或视频信息，用于头像或其他内容展示。</p>
            </div>
          </div>

          <div class="info-item">
            <div class="info-icon">
              📋
            </div>
            <div class="info-content">
              <p>开发者读取你的剪切板，用于复制或粘贴文本。</p>
            </div>
          </div>
        </div>
      </div>

      <div class="privacy-section">
        <div class="section-header">
          <h2 class="section-title">
            <i class="icon-rights" />
            你的权益
          </h2>
        </div>

        <div class="rights-content">
          <div class="right-item">
            <h3>撤回授权</h3>
            <p>关于收集你的位置信息，你可以通过以下路径：小程序主页右上角"…"—"设置"—点击特定信息—点击"不允许"，撤回对开发者的授权。</p>
          </div>

          <div class="right-item">
            <h3>个人信息权利</h3>
            <p>关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。</p>
          </div>

          <div class="right-item">
            <h3>账号注销</h3>
            <p>若你在小程序中注册了账号，你可以通过以下方式与开发者联系，申请注销你在小程序中使用的账号。在受理你的申请后，开发者承诺在十五个工作日内完成核查和处理，并按照法律法规要求处理你的相关信息。</p>
          </div>

          <div class="contact-info">
            <div class="contact-item">
              <span class="contact-label">邮箱:</span>
              <span class="contact-value">echo.zwf@outlook.com</span>
            </div>
          </div>
        </div>
      </div>

      <div class="privacy-section">
        <div class="section-header">
          <h2 class="section-title">
            <i class="icon-storage" />
            开发者对信息的存储
          </h2>
        </div>
        <p class="section-text">
          开发者承诺，除法律法规另有规定外，开发者对你的信息的保存期限应当为实现处理目的所必要的最短时间。
        </p>
      </div>

      <div class="privacy-section">
        <div class="section-header">
          <h2 class="section-title">
            <i class="icon-usage" />
            信息的使用规则
          </h2>
        </div>
        <p class="section-text">
          开发者将会在本指引所明示的用途内使用收集的信息
        </p>
        <p class="section-text">
          如开发者使用你的信息超出本指引目的或合理范围，开发者必须在变更使用目的或范围前，再次以<span class="highlight">短信或小程序内消息推送</span>方式告知并征得你的明示同意。
        </p>
      </div>

      <div class="privacy-section">
        <div class="section-header">
          <h2 class="section-title">
            <i class="icon-share" />
            信息对外提供
          </h2>
        </div>
        <p class="section-text">
          开发者承诺，不会主动共享或转让你的信息至任何第三方，如存在确需共享或转让时，开发者应当直接征得或确认第三方征得你的单独同意。
        </p>
        <p class="section-text">
          开发者承诺，不会对外公开披露你的信息，如必须公开披露时，开发者应当向你告知公开披露的目的、披露信息的类型及可能涉及的信息，并征得你的单独同意。
        </p>
      </div>

      <div class="privacy-section">
        <div class="section-header">
          <h2 class="section-title">
            <i class="icon-contact" />
            联系我们
          </h2>
        </div>
        <p class="section-text">
          你认为开发者未遵守上述约定，或有其他的投诉建议、或未成年人个人信息保护相关问题，可通过以下方式与开发者联系；或者向微信进行投诉。
        </p>
        <div class="contact-info">
          <div class="contact-item">
            <span class="contact-label">邮箱:</span>
            <span class="contact-value">echo.zwf@outlook.com</span>
          </div>
        </div>
      </div>

      <div class="privacy-footer">
        <p class="update-date">
          <span>更新日期：</span>2025-06-24
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.privacy-container {
  min-height: 100vh;
  padding: 40rpx;
}

.privacy-header {
  text-align: center;
  margin-bottom: 80rpx;
  padding: 80rpx 40rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 40rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20rpx);
}

.privacy-title {
  font-size: 56rpx;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 20rpx 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.privacy-subtitle {
  font-size: 32rpx;
  color: #7f8c8d;
  font-weight: 400;
}

.privacy-content {
  max-width: 1600rpx;
  margin: 0 auto;
}

.privacy-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 32rpx;
  padding: 40rpx;
  margin-bottom: 48rpx;
  box-shadow: 0 16rpx 50rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.section-header {
  margin-bottom: 48rpx;
}

.section-title {
  font-size: 44rpx;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 24rpx 0;
  display: flex;
  align-items: center;
  gap: 24rpx;

  i {
    font-size: 48rpx;
    color: #667eea;
  }
}

.section-description {
  font-size: 32rpx;
  color: #7f8c8d;
  margin: 0;
  line-height: 1.6;
}

.section-text {
  font-size: 32rpx;
  color: #34495e;
  line-height: 1.7;
  margin: 0 0 32rpx 0;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-intro {
  p {
    font-size: 36rpx;
    color: #34495e;
    line-height: 1.7;
    margin: 0;
    text-align: center;
    font-weight: 500;
  }
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 32rpx;
  padding: 40rpx;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 24rpx;
  border-left: 8rpx solid #667eea;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4rpx);
    box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.2);
  }
}

.info-icon {
  font-size: 48rpx;
  flex-shrink: 0;
  margin-top: 4rpx;
}

.info-content {
  p {
    margin: 0;
    font-size: 32rpx;
    color: #34495e;
    line-height: 1.6;
  }
}

.rights-content {
  display: flex;
  flex-direction: column;
  gap: 48rpx;
}

.right-item {
  padding: 40rpx;
  background: rgba(52, 152, 219, 0.05);
  border-radius: 24rpx;
  border-left: 8rpx solid #3498db;

  h3 {
    font-size: 36rpx;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 24rpx 0;
  }

  p {
    margin: 0;
    font-size: 32rpx;
    color: #34495e;
    line-height: 1.6;
  }
}

.contact-info {
  margin-top: 40rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 32rpx 40rpx;
  background: rgba(46, 204, 113, 0.05);
  border-radius: 24rpx;
  border-left: 8rpx solid #2ecc71;
}

.contact-label {
  font-weight: 600;
  color: #2c3e50;
  min-width: 120rpx;
}

.contact-value {
  color: #667eea;
  font-weight: 500;
  word-break: break-all;
}

.highlight {
  color: #e74c3c;
  font-weight: 600;
}

.privacy-footer {
  text-align: center;
  padding: 60rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 32rpx;
  box-shadow: 0 16rpx 50rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20rpx);
}

.update-date {
  font-size: 32rpx;
  color: #7f8c8d;
  margin: 0;

  span {
    font-weight: 600;
    color: #2c3e50;
  }
}

// 图标样式
.icon-info::before { content: "ℹ️"; }
.icon-rights::before { content: "⚖️"; }
.icon-storage::before { content: "💾"; }
.icon-usage::before { content: "📊"; }
.icon-share::before { content: "🔒"; }
.icon-contact::before { content: "📞"; }

// 响应式设计
@media (max-width: 768rpx) {
  .privacy-container {
    padding: 20rpx;
  }

  .privacy-header {
    padding: 60rpx 30rpx;
  }

  .privacy-title {
    font-size: 48rpx;
  }

  .privacy-section {
    padding: 20rpx;
  }

  .section-title {
    font-size: 40rpx;
  }

  .info-item {
    flex-direction: column;
    gap: 24rpx;
  }

  .contact-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16rpx;
  }
}
</style>
